<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Wookmark Plug-in Examples</title>
  <meta name="description" content="Overview of the wookmark examples">
  <meta name="author" content="Christoph Ono, Sebastian Helzle">

  <meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- CSS Reset -->
  <link rel="stylesheet" href="bower_components/normalize.css/normalize.css">

  <!-- Global CSS for the page and tiles -->
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/overview.css">

</head>
<body>
  <div>
    <header>
      <h1>Wookmark 2 &mdash; Plug-in Examples</h1>
      <p>Click a tile to view the example. Created by <a href="mailto:chri@sto.ph" title="Send a mail to Christoph">Christoph Ono</a> (<a href="http://twitter.com/gbks" title="Christoph on Twitter">@gbks</a>)
      for <a href="http://www.wookmark.com" title="Checkout wookmark.com">wookmark.com</a>
      and maintained by <a href="mailto:sebastian@helzle.net" title="Send a mail to Sebastian">Sebastian Helzle</a> (<a href="http://twitter.com/sebobo" title="Sebastian on Twitter">@sebobo</a>). Get the code on <a href="https://github.com/GBKS/Wookmark-jQuery" title="Wookmark plugin on Github">Github</a>!</p>
      <p>We also have the <a href="doc/wookmark.html" title="Wookmark docco">the annotated code</a>.</p>
      <a href="https://github.com/GBKS/Wookmark-jQuery" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
    </header>

    <br/>

    <div role="main">
      <ul id="container" class="tiles-wrap animated">
        <li>
          <a href="example/">
            <span>
              <b>SIMPLE</b><br/>
              A very simple Wookmark setup.
            </span>
          </a>
        </li>
        <li>
          <a href="example-amd/">
            <span>
              <b>AMD</b><br/>
              Dynamically loading Wookmark via AMD.
            </span>
          </a>
        </li>
        <li>
          <a href="example-api/">
            <span>
              <b>Remote API</b><br/>
              Displaying images from a remote API.
            </span>
          </a>
        </li>
        <li>
          <a href="example-api/server.html">
            <span>
              <b>PHP server</b><br/>
              Displaying images from a custom php server.
            </span>
          </a>
        </li>
        <li>
          <a href="example-endless-scroll/">
            <span>
              <b>Endless scroll</b><br/>
              Automatically load new content when scrolling down.
            </span>
          </a>
        </li>
        <li>
          <a href="example-filter/">
            <span>
              <b>Filtering</b><br/>
              Showing and hiding tiles based on user-controlled filters.
            </span>
          </a>
        </li>
        <li>
          <a href="example-flexible/">
            <span>
              <b>Flexible width</b><br/>
              Automatically adjusting tiles to always fill the container width.</b>
            </span>
          </a>
        </li>
        <li>
          <a href="example-lightbox/">
            <span>
              <b>Lightbox</b><br/>
              Showing a lightbox when users click tiles.
            </span>
          </a>
        </li>
        <li>
          <a href="example-load-images/">
            <span>
              <b>Load it all</b>
              <br/>Load the plugin after all images have loaded.
            </span>
          </a>
        </li>
        <li>
          <a href="example-placeholder/">
            <span>
              <b>Placeholders</b><br/>
              Displaying placeholders at the bottom to create even-sized columns.
            </span>
          </a>
        </li>
        <li>
          <a href="example-sort/">
            <span>
              <b>Sorting</b><br/>
              Let users change the sort order of your tiles.
            </span>
          </a>
        </li>
        <li>
          <a href="example-stamp/">
            <span>
              <b>Stamping</b><br/>
              Stamping tiles to specific positions in the layout.
            </span>
          </a>
        </li>
      </ul>
    </div>
  </div>

  <!-- Include the plug-in -->
  <script src="wookmark.js"></script>

  <!-- Once the page is loaded, initalize the plug-in. -->
  <script type="text/javascript">
    (function() {
      var wookmark = new Wookmark('#container');
    })();
  </script>
</body>
</html>
